<template>
  <div class="home">
    <homeNavBar></homeNavBar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <homeSearchBox></homeSearchBox>
    <homeCategories></homeCategories>
    <homeContent></homeContent>
    <div class="search-bar" v-if="isShowSearchBar">
      <searchBar />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import useHomeStore from "@/store/modules/home.js";
import homeNavBar from "./cpns/home-nav-bar.vue";
import homeSearchBox from "./cpns/home-search-box.vue";
import homeCategories from "./cpns/home-categories.vue";
import homeContent from "./cpns/home-content.vue";
import searchBar from "@/components/search-bar/search-bar.vue";

import useScroll from "@/hooks/useScroll.js";

// 发送网络请求
const homeStore = useHomeStore();
homeStore.fetchHotSuggestData();
homeStore.fetchCategoriesData();
homeStore.fetchHouseListData();

//滚到底部刷新数据
const { isReachBottom, clientHeight, scrollHeight, scrollTop } = useScroll();
watch(isReachBottom, (newValue) => {
  if (newValue)
    homeStore.fetchHouseListData().then(() => {
      isReachBottom.value = false;
    });
});

//搜索框显示的控制
const isShowSearchBar = computed(() => {
  return scrollTop.value >= 700;
});
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 60px;
  .banner {
    img {
      width: 100%;
    }
  }

  .search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    padding: 16px 16px 10px;
    background: #fff;
    z-index: 9;
  }
}
</style>
